import React, {useEffect, useState} from 'react';
import {Button, Form, Input, message, Modal, Space} from "antd";
import {MinusCircleOutlined, PlusOutlined} from "@ant-design/icons";
import jsCookie from "js-cookie";

function UseAddEdit({queryList}) {
    const [open,setOpen] = useState(false),
        [loading,setLoading] = useState(false),
        [form] = Form.useForm();
    function onCancel(){
        setOpen(false)
    }
    useEffect(()=>{
        if (open === false){
            form.resetFields();
        }else if(open.ID){
            form.setFieldsValue({
                ...open,
            })
        }else{
            form.setFieldsValue({
                phone_list:[{}]
            })
        }
    },[open])
    function onOk(){
        form.validateFields().then(values => {
            if (open.ID){
                values.ID=open.ID
            }
            ax.post("/api/addCompany", {
                ...values,
                group_id:JSON.parse(jsCookie.get("info")).id
            }).then(res=>{
                message.success(res.msg);
                queryList();
                onCancel();
            })
        })
    }
    return {
        setOpen,
        ModalDOM:<Modal
            title={open?.ID?"编辑":"添加"}
            open={open}
            onOk={onOk}
            onCancel={onCancel}
            confirmLoading={loading}
            width={800}
        >
            <Form
                labelCol={{span: 5}}
                wrapperCol={{span: 14}}
                form={form}
            >
                <Form.Item
                    label={"店铺名称"}
                    name={"name"}
                >
                    <Input placeholder={"请输入"} disabled={open.ID}/>
                </Form.Item>
                <Form.Item
                    label={"地址"}
                    name={"address"}
                >
                    <Input placeholder={"请输入"}/>
                </Form.Item>
                {
                    !open?.id && <Form.Item
                        label={"店长姓名"}
                        name={"realName"}
                    >
                        <Input placeholder={"请输入"}/>
                    </Form.Item>
                }
                {
                    !open?.id && <Form.Item
                        label={"店长手机号"}
                        name={"username"}
                    >
                        <Input placeholder={"请输入"}/>
                    </Form.Item>
                }

                {/*<Form.Item*/}
                {/*    label={"适合人数"}*/}
                {/*    name={"info"}*/}
                {/*>*/}
                {/*    <Input placeholder={"如:2-3人"}/>*/}
                {/*</Form.Item>*/}
                <Form.Item
                    label={"联系人"}
                >
                    <Form.List name="phone_list">
                        {(fields, { add, remove }) => (
                            <>
                                {fields.map(({ key, name, ...restField }) => (
                                    <Space
                                        key={key}
                                        style={{
                                            display: 'flex',
                                            marginBottom: 8,
                                        }}
                                        align="baseline"
                                    >
                                        <Form.Item
                                            {...restField}
                                            name={[name, 'user_name']}
                                            rules={[
                                                {
                                                    required: true,
                                                    message: '请填写联系人',
                                                },
                                            ]}
                                        >
                                            <Input placeholder={"联系人称呼"}/>
                                        </Form.Item>
                                        <Form.Item
                                            {...restField}
                                            name={[name, 'phone']}
                                            rules={[
                                                {
                                                    required: true,
                                                    message: '请填写手机号',
                                                },
                                            ]}
                                        >
                                            <Input placeholder={"手机号"}/>
                                        </Form.Item>

                                        <MinusCircleOutlined onClick={() => remove(name)} />
                                    </Space>
                                ))}
                                <Form.Item>
                                    <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                        添加联系人
                                    </Button>
                                </Form.Item>
                            </>
                        )}
                    </Form.List>
                </Form.Item>
            </Form>
        </Modal>
    }
}

export default UseAddEdit;